import { MobilePageDesigner, Props } from 'components/mobilePageDesigner';
import { StationService as AdminStation, guid } from 'admin/services/station';
import { StationService as UserStation } from 'user/services/stationService';
import React = require('react');
import { State as HTMLCotnrolState } from 'components/html/control';
import { PageProps } from 'maishu-chitu-react';
import { PageSpiner, PageSpinerContext } from 'share/controls/page-spiner';

type LoadResult = ReturnType<MenuDesignPage["loadData"]> extends Promise<infer T> ? T : unknown;

export default class MenuDesignPage extends React.Component<PageProps> {
    adminStation: AdminStation;
    userStation: UserStation;

    constructor(props) {
        super(props)

        this.state = { pageData: null }

        this.adminStation = this.props.createService(AdminStation);
        this.userStation = this.props.createService(UserStation);
    }

    async loadData() {
        let pageData: PageData = await this.userStation.pages.menu();

        let menuControl = pageData.controls.filter(o => o.controlName == "menu")[0];
        console.assert(menuControl != null);
        let msg = `<h4 class="text-center" style="line-height:180%;padding:180px 40px 0px 40px">
            <div>点击右边操作面板的</div>
            <b>"点击添加菜单项"</b>
            <div>按钮可以添加菜单项</div>
        </h4>`;

        pageData.controls.push({
            controlName: 'html', controlId: guid(),
            position: 'view', save: false, data: { html: msg } as HTMLCotnrolState,
            selected: 'disabled'
        });

        return { pageData };

    }

    render() {

        return <PageSpiner load={() => this.loadData()}>
            <PageSpinerContext.Consumer>
                {args => {
                    let { pageData } = args.result as LoadResult
                    let props: Props = {
                        pageData,
                        save: (pageData) => this.adminStation.savePageData(pageData),
                        showComponentToolbar: false,
                        showTemplateButton: false,
                        showSnapshootButton: false,
                        elementPage: this.props.source,
                    }
                    return <MobilePageDesigner {...props} />
                }}
            </PageSpinerContext.Consumer>
        </PageSpiner>
    }
}

